import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        useMaterial3: false,
        primarySwatch: Colors.yellow,
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text("Flutter App")),
        body: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {


  List<String> list = [];
  MyHomePage({super.key}){
    for (var i = 0; i < 20; i++) {
    list.add("第$i条数据");
    }
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
        itemCount: list.length,
        padding: const EdgeInsets.all(10),
        /**
         * gridDelegate:决定使用那种方法来实现网格布局
         *    SliverGridDelegateWithFixedCrossAxisCount:即 GridView.count
         *    SliverGridDelegateWithMaxCrossAxisExtent:即GridView.extent
         */
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,    //一行widget个数
          mainAxisSpacing: 10,  //上下间距
          crossAxisSpacing: 10, //水平间距
          childAspectRatio: 0.7,  //子元素宽高比
        ),
        itemBuilder: (ctx, index) {
          return Container(
            height: 50,
            alignment: Alignment.center,
            decoration: const BoxDecoration(
              color: Colors.blue,
            ),
            child: Text(list[index]),
          );
        });
  }
}
